<template>
  <div id="antiAddiction">
    <k-button class="top-btn" value="新增提醒" @click.native="addfigBad" />
    <k-button class="top-btn" value="删除提醒" @click.native="configBabyLib" />
    <!--表格相关 -->
    <el-table
      :data="boxList"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column min-width="60px" type="selection" align="center" />
      <el-table-column width="60px" label="序号" type="index" align="center" />
      <el-table-column prop="dayHour" min-width="90px" label="提醒时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.dayHour == 0 ? '不提醒' : scope.row.dayHour + '个小时' }}
        </template>
      </el-table-column>
      <el-table-column prop="operation" min-width="100px" label="到时操作" align="center" />
      <el-table-column prop="description" min-width="200px" label="提示" align="center" />
      <el-table-column prop="updateTime" min-width="100px" label="操作时间" align="center" />
      <el-table-column prop="updateUser" min-width="80px" label="操作人" align="center" />
      <el-table-column min-width="80px" label="提醒状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            :active-value="1"
            :inactive-value="2"
            @change="boxOnlineState(scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              class="table-btn"
              value="查看/修改"
              @click.native="addBoxUpdateDialog(scope.row)"
            />

          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增提醒 addBox 弹窗 -->
    <k-dialog
      :show-hide.sync="addBox.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      title="新增/修改提醒"
      :show-foot="false"
      :two-btn="true"
      @click="pushBoxDataEvent"
    >
      <div class="dialog-giveBabySetting">
        <div style="padding: 20px; text-align: right;">
          <div style="margin-bottom: 20px">
            <label>当日累计在线时长：</label>
            <el-select
              v-model="minefield.dayHour"
              placeholder="请选择"
              class="code"
            >
              <el-option
                v-for="item in boxsResultLists"
                :key="item.id"
                :label="item.lineName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div style="margin-bottom: 20px">
            <label>到时操作：</label>
            <el-select
              v-model="minefield.operation"
              class="code"
              placeholder="请选择"
            >
              <el-option
                v-for="item in boxsResultList"
                :key="item.id"
                :label="item.lineName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div v-if="minefield.operation == 2" style="margin-bottom: 20px">
            <label>休息时长：</label>
            <!-- <el-input v-model="minefield.countMin" @input="changeMemberId" /> -->
            <el-input v-model="minefield.countMin" placeholder="请输入时间" class="code" @input="changeMemberId">
              <el-select slot="prepend" v-model="minefieldselect" class="codes" placeholder="请选择">
                <el-option v-for="item in boxsResultListSelect" :key="item.id" :label="item.lineName" :value="item.id" />
              </el-select>
            </el-input>
          </div>
          <div style="margin-bottom: 20px">
            <label>到时提醒文案：</label>
            <el-input v-model="minefield.description" class="code" type="textarea" />
          </div>
        </div>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import {
  antiAddictionList,
  add,
  update,
  del
} from '@/api/antAddiction/index'
import { Message } from 'element-ui'
export default {
  name: 'Extension',
  data() {
    return {
      minefieldselect: 1,
      lookOut: false, // true修改 false新增
      lookData: {},
      centerDialogVisible: false,
      beActive: 1,
      addBoxInfo: {
        boxName: ''
      },
      addBox: {
        showHide: false
      },
      addBoxUpdate: {
        showHide: false
      },
      minefield: {
        dayHour: '', // 总时长
        countMin: undefined,
        operation: '', // 到时操作
        description: '' // 文案
      },
      boxsResultLists: [
      ],
      boxsResultList: [
        {
          'lineName': '设置休息时长',
          'id': 2
        },
        {
          'lineName': '文案提醒',
          'id': 1
        }
      ],
      boxsResultListSelect: [
        {
          'lineName': '小时',
          'id': 2
        },
        {
          'lineName': '分钟',
          'id': 1
        }
      ],
      multipleSelection: [],
      boxList: []
      // rules: {
      //   name: [
      //     { required: true, message: '请输入活动名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      //   region: [
      //     { required: true, message: '请选择活动区域', trigger: 'change' }
      //   ],
      //   date1: [
      //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      //   ],
      //   date2: [
      //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
      //   ],
      //   type: [
      //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
      //   ],
      //   resource: [
      //     { required: true, message: '请选择活动资源', trigger: 'change' }
      //   ],
      //   desc: [
      //     { required: true, message: '请填写活动形式', trigger: 'blur' }
      //   ]
      // }
    }
  },
  created() {
    this.loadData()
    for (let i = 0; i < 24; i++) {
      if (i == 0) {
        this.boxsResultLists.push({ 'lineName': '不提醒',
          'id': i })
      } else {
        this.boxsResultLists.push({ 'lineName': i + '个小时',
          'id': i })
      }
    }
  },
  methods: {
    changeMemberId(val) {
      this.minefield.countMin = val.replace(/[^\d]/g, '')
      // let timer = 0
      // if (this.minefieldselect == 1) timer = this.minefield.countMin * 60
      // if (this.minefieldselect == 2) timer = this.minefield.countMin
      // if (this.minefieldselect == 3) timer = this.minefield.countMin / 60
      // this.boxsResultList[0].lineName = `休息${timer}分钟`
      console.log(this.minefield.countMin, this.minefieldselect)
    },
    loadData() {
      antiAddictionList({}).then((res) => {
        console.log(res)
        // const data = res.data
        this.boxList = res.data.data
        this.boxList.map((item, index) => {
          if (item.operation == 1) item.operation = '文案提醒'
          if (item.operation == 2) item.operation = `休息${item.countMin}分钟`
        })
      })
    },
    // 修改状态
    boxOnlineState(v) {
      console.log(v.row)
      const operation = JSON.parse(JSON.stringify(v.row))
      if (operation.operation == '文案提醒') operation.operation = 1
      else operation.operation = 2
      update(operation).then((res) => {
        if (res.data.success) {
          this.loadData()
        } else {
          v.row.status = 2
          this.$message.error(res.data.msg)
        }
      })
    },
    // 删除
    configBabyLib(v) {
      console.log(this.multipleSelection, v)
      this.$confirm('确定删除选中的提醒么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const arr = []
          if (this.multipleSelection[0].status == 1) return this.$message.error('不可删除已开启的提醒')
          this.multipleSelection.map((item, index) => {
            arr.push(item.id)
          })
          del({ 'ids': arr }).then((res) => {
            console.log(res)
            if (res.data.success) {
              this.$message.success(res.data.msg)
              this.loadData()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    addfigBad() {
      this.lookOut = false
      this.addBox.showHide = true
      this.$resetForm(this.minefield)
    },

    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    pushBoxDataEvent() {
      console.log(this.minefield, 'asdasdakkkkkkk')
      if (this.minefieldselect == 2) this.minefield.countMin = this.minefield.countMin * 60
      if (this.minefieldselect == 1) this.minefield.countMin
      if (!this.lookOut) {
        if (this.minefield.dayHour == undefined) return Message('总时长不可为空')
        if (this.minefield.operation == undefined) return Message('到时操作不可为空')
        if (this.minefield.countMin == undefined && this.minefield.operation == 2) return Message('休息时长不可为空')
        if (this.minefield.description == undefined) return Message('到时提醒文案不可为空')
        add(this.minefield).then((res) => {
          if (res.data.success) {
            this.addBox.showHide = false
            this.loadData()
          } else this.$message.error(res.data.msg)
          console.log(res)
        })
      } else {
        console.log(this.lookData, 'asdasdsa')
        update(this.minefield).then((res) => {
          if (res.data.success) {
            this.addBox.showHide = false
            this.loadData()
          } else this.$message.error(res.data.msg)
          console.log(res)
        })
      }
    },
    // 修改提醒
    addBoxUpdateDialog(v) {
      this.lookOut = true
      this.minefieldselect = 1

      console.log(v, 'v')
      this.minefield.id = v.id
      let operation = 0
      if (v.operation == '文案提醒') operation = 1
      else operation = 2
      this.addBox.showHide = true
      this.minefield.dayHour = v.dayHour
      this.minefield.countMin = v.countMin
      this.minefield.operation = operation
      this.minefield.description = v.description
    }
  }
}
</script>

<style lang="scss" scoped>
$borderColor: #e8e8e8; // 主色调
$backColor: #f5f5f5; // 主色调
$mainColor: #3b425d; // 主色调
.code{
  width: 60%;
}
.codes{
  width: 120px;
}
.addBox-dialog {
  ::v-deep .el-dialog__body {
    width: 878px !important;
    padding: 10px 30px 30px 30px;
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }

  ::v-deep .el-select .el-select__tags>span {
    display: none;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;

    ::v-deep .el-tag__close {
      color: $mainColor;
    }

    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}
#antiAddiction{
  width: 100%;
  height: 100%;
  padding: 0 10px;
  :deep(.el-dialog){
    width: 600px !important;
  }
  .addBox-dialog {
    width: 600px !important;
    text-align: right;
    ::v-deep .el-dialog__body {
      padding: 10px 80px;
    }

    ::v-deep .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      color: #909399;
      font-size: 40px;
    }
  }
  .top-btn {
    margin: 30px 0px 30px 0px;
    font-size: 14px;
    color: #ffffff;

    &:nth-of-type(2) {
      margin-left: 20px;
    }

    &:nth-of-type(3) {
      margin-left: 20px;
    }

    &:nth-of-type(4) {
      margin-left: 20px;
    }
  }

}
</style>
